<template>
  <el-dialog
    :title="isAdd ? '添加菜单' : '编辑菜单'"
    :visible.sync="isShow"
    center
    :before-close="cancel"
  >
    <!-- 表单 -->
    <el-form :model="menuInfo" :rules="rules" ref='form'>
      <el-form-item label="菜单名称" label-width="120px" prop="title">
        <el-input v-model="menuInfo.title"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" label-width="120px" prop='pid'>
        <el-select v-model="menuInfo.pid" placeholder="请选择上级菜单">
          <el-option label="请选择上级菜单" value=""></el-option>
          <el-option label="顶级菜单" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单类型" label-width="120px">
        <el-radio v-model="menuInfo.type" :label="1">目录</el-radio>
        <el-radio v-model="menuInfo.type" :label="2">菜单</el-radio>
      </el-form-item>
      <el-form-item label="菜单地址" label-width="120px">
        <el-input v-model="menuInfo.url"></el-input>
      </el-form-item>
      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="menuInfo.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="2"
        >
        </el-switch>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {menuadd} from "@/request/api.js"
export default {
    //接收来自父组件的数据
    props:["isShow","isAdd"],
    data(){
        return {
            //定义表单数据
            menuInfo:{
                pid:"", //上级分类编号  注意：顶级菜单-0
                title:"",//菜单名称string
                icon:"", //图标string
                type:1,  //类型 1目录  2菜单  number
                url:"", //菜单地址string
                status:1, //状态   1正常2禁用   number类型number
            },
            //定义表单验证规则
            rules:{
                title: [
                { required: true, message: '请输入菜单名称', trigger: 'blur' },
                { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                pid: [
                    { required: true, message: '请选择上级菜单', trigger: 'change' }
                ],
            }
        }
    },
    //方法
    methods:{
        //1.点击取消按钮，关闭弹框
        cancel(){
            //a.通知父组件修改数据-关闭弹框 isShow修改父组件的数据  子传父
            this.$emit("cancel");
            
            this.reset();
        },

        //3.重置
        reset(){
            //a.清空表单数据
            this.menuInfo = {
                pid:"", //上级分类编号  注意：顶级菜单-0
                title:"",//菜单名称string
                icon:"", //图标string
                type:1,  //类型 1目录  2菜单  number
                url:"", //菜单地址string
                status:1, //状态   1正常2禁用   number类型number
            };
            //b.清空错误提示
            this.$refs.form.resetFields();
        },

        //2.点击确定按钮
         sure(){
            //a.通过表单验证
            this.$refs.form.validate(async (val)=>{//val = false   val=true
                //没有通过验证，则不做任何操作
                if(!val){
                    return;
                }

                //b.通过验证，发起请求，将数据添加到数据库
                let res = await menuadd(this.menuInfo);
                if(res.code == 200){
                    //提示用户添加成功
                    this.$message.success(res.msg)

                    //关闭弹框
                    this.cancel();
                }else{
                    this.$message.warning(res.msg)
                }

            });

            // //a.关闭弹框
            // this.cancel();

            // //b.添加/编辑
            // if(this.isAdd){
            //     console.log("添加")
            // }else{
            //     console.log("编辑")
            // }
        }
    }
}
</script>

<style>
</style>